⚡ 30 秒速记

• 钩子把有状态逻辑按目的组织和复用
• 函数组件每轮拿到新的状态快照
• 普通状态钩子维持固定调用顺序
• 外部同步用副作用，事件结果在事件里处理
• 自定义钩子不自动共享状态实例

Hooks 让状态逻辑不必依附类，也不必为了复用包出很多层组件。 每次函数执行仍是一次新渲染，状态由框架在调用之间保存，回调捕获的则是那一轮的值。相关的订阅、清理和状态可以抽进自定义钩子，按业务目的放在一起。它没有消除闭包和依赖管理，需要更新前值时用函数更新，与外部系统同步时明确副作用依赖。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

React-Hooks 设计动机初探

何谓类组件（Class Component）

所谓类组件，就是基于 ES6 Class 这种写法，通过继承 React.Component 得来的 React 组件。以下是一个典型的类组件：

class DemoClass extends React.Component {
 
  // 初始化类组件的 state
  state = {
    text: ""
  };
  // 编写生命周期方法 didMount
  componentDidMount() {
    // 省略业务逻辑
  }
  // 编写自定义的实例方法
  changeText = (newText) => {
    // 更新 state
    this.setState({
      text: newText
    });
  };
  // 编写生命周期方法 render
  render() {
    return (
      <div className="demoClass">
        <p>{this.state.text}</p>
        <button onClick={this.changeText}>点我修改</button>
      </div>
    );
  }
}

何谓函数组件/无状态组件（Function Component/Stateless Component）

函数组件顾名思义，就是以函数的形态存在的 React 组件。早期并没有 React-Hooks 的加持，函数组件内部无法定义和维护 state，因此它还有一个别名叫“无状态组件”。以下是一个典型的函数组件：

function DemoFunction(props) {
  const { text } = props
  return (
    <div className="demoFunction">
      <p>{`function 组件所接收到的来自外界的文本内容是：[${text}]`}</p>
    </div>
  );
}

函数组件与类组件的对比：无关“优劣”，只谈“不同”